<template>
  <!-- 
    BEM 命令css类名的方式

    B - block
    E - element
    M - modifiy


    button
    button__top
    button__bottom
    button--primary
    button--default
    button--dange
  -->
  <div class="login">
    <div class="login__logo">
      <!-- 
        图片动态路径的问题

        1. npm run serve 或 npm run build 时，这个图片路径有以最终打包的路径为准。
        @/assets/logo.png   =>  /img/logo.xxxxx.png
        <img src="@/assets/logo.png" alt="" />  
        静态 src 地址，会帮我们处理好路径问题

        2. 动态的 src 地址，就不会处理路径了，最终的 src 地址，就为你怎么写的就怎么显示
       -->
      <!-- <img src="@/assets/logo.png" alt="" /> -->

      <div class="img"></div>
    </div>

    <van-form @submit="onSubmit">
      <!-- 做一个邮件的校验 -->
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :loading="loading"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import axios from "axios";
import { Form, Field, Button, Toast } from "vant";

export default {
  name: "login",

  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
  },

  data() {
    return {
      username: "",
      password: "",
      loading: false,
    };
  },

  methods: {
    // 调用了 vuex 的动作
    async onSubmit() {
      try {
        this.loading = true;

        await this.$store.dispatch("login", {
          username: this.username,
          password: this.password,
        });

        // 3. 跳转到 首页 或者 之前要去的页面
        const redirectUrl = this.$route.query.redirect || "/";
        this.$router.replace(redirectUrl);
      } catch (error) {
        console.log(error);
        Toast(error.message);
      } finally {
        this.loading = false;
      }
    },

    // 接口请求完毕之后，直接 提交 突变
    // async onSubmit() {
    //   try {
    //     this.loading = true;

    //     const { data } = await axios.post("/base/login", {
    //       username: this.username,
    //       password: this.password,
    //     });

    //     if (data.code !== 0) {
    //       this.$toast(data.msg);
    //       return;
    //     }

    //     this.$toast("登录成功");

    //     // 1. 将 token 给存储起来
    //     localStorage.setItem("token", data.data.token);
    //     // 2. 还存一份到 vuex 中
    //     this.$store.commit("set_token", data.data.token);
    //     // 3. 跳转到 首页 或者 之前要去的页面
    //     const redirectUrl = this.$route.query.redirect || "/";
    //     this.$router.replace(redirectUrl);
    //   } catch (error) {
    //     console.log(error);
    //     Toast(error.message);
    //   } finally {
    //     this.loading = false;
    //   }
    // },

    //   onSubmit() {
    //     this.loading = true;
    //     axios
    //       .post("/base/login", {
    //         username: this.username,
    //         password: this.password,
    //       })
    //       .then(({ data }) => {
    //         console.log(data);
    //         if (data.code !== 0) {
    //           // 出错了 吐司一下
    //           Toast(data.msg);
    //           return;
    //         }
    //         // 登录成功
    //       })
    //       .catch((error) => {
    //         Toast(error.message);
    //       })
    //       .finally(() => {
    //         this.loading = false;
    //       });
    //   },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
